<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #contentDiv{
            width: 60%;
            height: 500px;
            border: 1px solid black;
            margin: 0 auto;
        }
        #nav{
            width: 60%;
            text-indent: 10px;
            font-size: 14px;
            border-bottom: 1px solid black;
        }

        #messageDiv_text div{
            width: 150px;
            height: 20px;
            margin: 20px auto;
            font-size: 14px;
            text-align: center;
        }
        #imgMessageDiv{
            width: 100px;
            height: 200px;
        }
    </style>

    <script>
        var bookArray = [
            {bookId:1,bookName:"斗罗大陆",auth:"唐家三少",type:"科幻小说",img:"img/1.jpg",price:25},
            {bookId:2,bookName:"斗破苍穹",auth:"天蚕土豆",type:"科幻小说",img:"img/2.jpg",price:27},
            {bookId:3,bookName:"三国演义",auth:"罗贯中",type:"文学著作",img:"img/3.gif",price:14},
            {bookId:4,bookName:"山海经",auth:"轶名",type:"文学著作",img:"img/2.jpg",price:25},
            {bookId:5,bookName:"最好的告别",auth:"阿图·葛文德",type:"文学著作",img:"img/3.gif",price:25},
            {bookId:6,bookName:"大主宰",auth:"天蚕土豆",type:"科幻小说",img:"img/2.jpg",price:25},
            {bookId:7,bookName:"java",auth:"老吴",type:"计算机网络",img:"img/3.gif",price:25},
            {bookId:8,bookName:"前端基础知识",auth:"老李",type:"计算机网络",img:"img/1.jpg",price:25},
            {bookId:9,bookName:"java进阶",auth:"老张",type:"计算机网络",img:"img/1.jpg",price:25},
        ]
        window.onload = function () {
            fullTable(bookArray);
            var trArray = $("data").getElementsByTagName("tr");
            for (var i=0;i<trArray.length;i++){

            }
        }

        /**
         * 填充表格数据
         * @param array
         */
        function fullTable(array) {
            var str = "";
            array.forEach(obj =>
                    {str += `<tr><td><img src="${obj.img}" width="40" height="50"></td><td>${obj.bookName}</td>
                            <td>${obj.auth}</td><td>${obj.price}</td></tr>`});
            $("data").innerHTML = str;
        }

        /**
         * 查找书籍
         */
        function findBook() {
            var arr = bookArray.filter(obj =>{
                var bookNameInfo = $("findName").value;
                return obj.bookName.indexOf(bookNameInfo) != -1
                    || obj.type.indexOf(bookNameInfo) != -1;
            });
            fullTable(arr);
        }



        function showShopCar(book) {

        }

        function $(elementId) {
            return document.getElementById(elementId);
        }
    </script>

</head>
<body>
    <div id="contentDiv">
        <div id="nav">
            <span>编程技术</span>
            <input type="button" value="科幻小说">
            <input type="button" value="计算机网络">
            <input type="button" value="文学著作">
        </div>

        <div id="body" style="display: flex;">
            <div id="messageDiv" style="width: 50%;">
                <div style="display: flex">
                    <div id="messageDiv_text">
                        <div>图书名：<span id="b_bookName"></span></div>
                        <div>作者：<span id="b_auth"></span></div>
                        <div>所属类型：<span id="b_type"></span></div>
                        <div>出版时间：<span>2001-12-21</span></div>
                        <div>出版社：<span>神话出版社</span></div>
                        <div>推荐程度：<span>*****</span></div>
                        <div>
                            原价：<span id="b_money"></span>
                            折扣：<span>0.97</span>
                            售价：<span id="b_price"></span>
                        </div>
                    </div>
                    <div>
                        <img src="" id="imgMessageDiv">
                    </div>
                </div>

                <div>
                    书籍介绍：<textarea name="info" rows=""></textarea><br>
                    <input type="button" value="购买" id="shopBook">
                </div>
            </div>
            <div id="fromDiv">
                <form>
                    <div style="width: 400px;height: 400px;border: 1px solid red;overflow: auto;">
                        <table style="width: 400px;height: 300px" cellspacing="0">
                            <thead style="height:100px;">
                            <tr><th colspan="4"><h2>图书一览</h2></th></tr>
                            <tr>
                                <th></th>
                                <th>图书名</th>
                                <th>作者</th>
                                <th>销售价</th>
                            </tr>
                            </thead>
                            <tbody style="text-align:center;" id="data">

                            </tbody>
                        </table>
                    </div>
                    <div style="margin: 20px 80px;">
                        <input type="text" id="findName">
                        <input type="button" value="查询" onclick="findBook()">
                    </div>
                </form>
            </div>
            <div id="shopDiv" style="display: none">
                <div>
                    <div style="height: 400px;overflow: scroll">
                        <table border="1" cellspacing="0" id="shopTable">
                            <thead>
                            <tr>
                                <th>书名</th>
                                <th>单价</th>
                                <th>购买数量</th>
                                <th>单项总价</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="shopData"></tbody>
                        </table>
                    </div>
                    <div style="align-items:center;display: flex;width: 850px;padding:0 50px;justify-content: space-between;height: 50px;">
                        <div><span>总价为：</span><span id="totalPriceSpan"></span></div>
                        <input type="button" value="继续购物" class="Btn" onclick="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>